﻿@page "/PivotGridChartIntegration"
@inject ISalesInfoDataProvider Sales
@layout DataProviderAccessArea<ISalesInfoDataProvider>
<div class="demo-description">
    <h2>Pivot Grid - Chart Integration</h2>
    <p>
        This demo illustrates linked <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGrid-1">Pivot Grid</a> components. The chart is automatically updated when a user expands or collapses rows/columns in the Pivot Grid, and the Chart shows data from the Pivot Grid's lowest expanded level.
    </p>
    <p>
        To link these components, do the following:
    </p>
    <ol>
        <li>
            Create a custom method that asynchronously returns an <b>IEnumerable&lt;T&gt;</b>
            collection (<i>Sales.Load()</i> in this demo).
        </li>
        <li>Create a data provider object (<i>PivotGridDataProvider</i> in this demo).</li>
        <li>Bind the Pivot Grid to the data provider object's <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGridDataProvider-1.PivotGridDataSource">PivotGridDataSource</a> property.</li>
        <li>Bind Charts to the data provider object's <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPivotGridDataProvider-1.ChartDataSource">ChartDataSource</a> property.</li>
        <li>Assign corresponding fields to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.NameField">NameField</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.ArgumentField">ArgumentField</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.ValueField">ValueField</a> properties.</li>
        <li>
            Additionally, you can assign a data field name to the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.PaneField">PaneField</a> property. This enables the Chart to group data by the corresponding field's values and create a separate Pane for each group.
        </li>
    </ol>
</div>
<DxChart Data="@(PivotGridDataProvider.ChartDataSource)"
         CssClass="mw-1100">
    <DxChartLegend Position="RelativePosition.Outside" VerticalAlignment="VerticalEdge.Bottom"
        CssClass="shadow border justify-content-around" />
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         PaneField="@(s => s.ValueFieldName)"
                         SeriesType="ChartSeriesType.Bar" />
</DxChart>
<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)"
             CssClass="mw-1100">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" Area="PivotGridFieldArea.Row" />
    <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row" />
    <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row" />
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" Area="PivotGridFieldArea.Column" Caption="Year" />
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
        <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
    </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum" />
    <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Count" />
</DxPivotGrid>
<CodeSnippet_Pivot_ChartIntegration />
@code {
    DxPivotGridDataProvider<SaleInfo> PivotGridDataProvider;
    protected override void OnInitialized()
    {
        base.OnInitialized();
        PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.GetSalesAsync());
    }

}
